<template>
	<view>
		<view v-if="(item || null) != null" class="business-card border-radius-main">
			<view class="business-header">
				<image :src="item.logo" class="business-avatar" mode="aspectFill"></image>
				<view class="business-info">
					<view class="fr tr">
						<view class="business-distance" v-if="((item.distance || null) != null && item.distance != '0')">{{$t('extraction-address.extraction-address.42v8tv')}} {{item.distance}}</view>
						<view class="favorite-btn" @tap="handleFavorite" :data-value="item.id">
							<uni-icons v-if="item.is_soucang == 1" class="spi" type="star-filled" size="18" color="#ff0000"></uni-icons>
							<uni-icons v-else class="spi" type="star" size="18" color="#cccccc"></uni-icons>
							<text class="favorite-text" :class="{ 'favorited': item.is_soucang }">
								{{ item.is_soucang ? $t('goods-detail.goods-detail.by7052')+$t('goods-detail.goods-detail.dco1sc') : $t('goods-detail.goods-detail.dco1sc') }}
							</text>
						</view>
					</view>
					<view class="fl card-title-box">
						<view class="business-name-container">
							<view v-if="propSpec == 1" class="business-name spec"><text class="t1">{{$t('fengcheche.classinfo.zhiding')}}</text>{{ item.name }}</view>
							<view v-else class="business-name">{{ item.name }}</view>
						</view>
						<view class="business-location">
							<text class="location-text">{{ item.province_name }} {{ item.city_name }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="business-description">
				<view class="">{{ item.com_describe_view }}</view>
			</view>
			
			<view class="business-categories">
				<text class="category-badge">{{item.category_name}}</text>
				<block v-if="item.com_label_arr.length > 0">
					<text v-for="(item2, index2) in item.com_label_arr" :key="index2" class="category-badge">
					{{ item2 }}
					</text>
				</block>
			</view>
			
			<view v-if="item.com_zhengshu_arr.length > 0" class="business-certificates">
				<view v-for="(item2, index2) in item.com_zhengshu_arr" :key="index2" class="certificate-badge">
					<uni-icons type="medal" size="12" color="#f59e0b"></uni-icons>
					<text>{{ item2.name }}</text>
				</view>
			</view>
			
			<view v-if="item.more_pic.length > 0" class="business-images">
				<image v-for="(item2, index2) in item.more_pic" :key="index2" :src="item2" mode="aspectFill" class="business-image"></image>
			</view>
			
			<block v-if="(item.the_level_content || null) != null && (item.the_level_content.is_shop_list_show_product || null) != null && parseInt(item.the_level_content.is_shop_list_show_product.value) == 1">
				<view v-if="item.product_list.length > 0" class="business-images">
					<image v-for="(item2, index2) in item.product_list" :key="index2" :src="item2.images" mode="aspectFill" class="business-image" :data-value="'/pages/fcc/classinfo/companyshop-detail/companyshop-detail?id='+item.id" @tap="url_event"></image>
				</view>
			</block>
			
			<view class="business-footer">
				<view v-if="(item.the_level_content || null) != null && (item.the_level_content.is_company_list_tel || null) != null && parseInt(item.the_level_content.is_company_list_tel.value) == 1" class="business-phone" @tap="call_event" :data-value="item.contact_tel">
					<uni-icons type="phone" size="18" color="#999"></uni-icons>
					<text class="phone-number">{{ item.contact_tel_view }}</text>
				</view>
				<button class="view-info-btn" :data-value="'/pages/fcc/classinfo/companyshop-detail/companyshop-detail?id='+item.id" @tap="url_event">查看店铺</button>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<!-- #endif -->
	</view>
</template>

<script>
	const app = getApp();
	// #ifdef APP-PLUS
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	// #endif
	export default {
		name:"card-item",
		data() {
			return {
				permissionID: ''
			};
		},
		components: {
			// #ifdef APP-PLUS
			ykAuthpup
			// #endif
		},
		props: {
			propConfig: {
				type: [String, Object],
				default: null
			},
			propData: {
			    type: Object,
			    default: () => {
			        return {};
			    },
			},
			propSpec: {
				type: [String, Number],
				default: 0
			}
		},
		//对传值进行计算
		computed:{
			item(){
				return this.propData || null;
			}
		},
		methods: {
			// url事件
			url_event(e) {
				app.globalData.url_event(e);
			},
			
			// 搜藏功能
			handleFavorite(e){
				if(!app.globalData.is_single_page_check()) {
				    return false;
				}
				var user = app.globalData.get_user_info(this, 'handleFavorite');
				if (user != false) {
					uni.showLoading({
						title: this.$t('common.processing_in_text'),
					});
					var val = e.currentTarget.dataset.value;
					uni.request({
						url: app.globalData.get_request_url('favor', 'shop', 'classinfo'),
						method: 'POST',
						data: {
							id: val,
						},
						dataType: 'json',
						success: res => {
							uni.hideLoading();
							if (res.data.code == 0) {
								let temp_item = this.item;
								temp_item['is_soucang'] = res.data.data;
								this.setData({
									item: temp_item
								});
								app.globalData.showToast(res.data.msg, 'success');
							} else {
								if (app.globalData.is_login_check(res.data, this, 'soucang')) {
									app.globalData.showToast(res.data.msg);
								}
							}
						},
						fail: () => {
							uni.hideLoading();
							app.globalData.showToast(this.$t('common.internet_error_tips'));
						}
					});
				}
			},

			// #ifdef APP-PLUS
			//用户授权权限后的回调
			changeAuth(e){
				// 如果是头像查看的权限返回
				if(this.permissionID == 'WRITE_EXTERNAL_STORAGE')
				{
					// 直接下载
					app.globalData.save_image_by_url(this.avatar);
				}else{
					app.globalData.call_tel(e);
				}
			},
			// #endif
			
			// 打电话
			call_event(e){
				var tel = e.currentTarget.dataset.value;
				if(app.globalData.is_android())
				{
					this.permissionID = 'CALL_PHONE';
					setTimeout(()=>{
						this.$refs['authpup'].open(tel);
					},500);
				}else{
					app.globalData.call_tel(tel);
				}
			}
		}
	}
</script>

<style>
	.favorite-btn {
	  display: flex;
	  align-items: center;
	  padding: 8rpx 0;
	  justify-content:flex-end;
	}
	.favorite-text {
	  font-size: 28rpx;
	  color: #cccccc;
	  transition: color 0.3s;
	}
	
	.favorite-text.favorited {
	  color: #ff4757;
	}
	.business-card {
	  background-color: #ffffff;
	  padding: 20rpx 20rpx 10rpx;
	  margin:0 20rpx 20rpx;
	  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}
	
	.business-header {
	  display: flex;
	  gap: 20rpx;
	}
	
	.business-avatar {
	  width: 80rpx;
	  height: 80rpx;
	  border-radius: 50%;
	}
	
	.business-info {
	  flex: 1;
	}
	
	.business-name-container {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.business-name {
	  font-size: 32rpx;
	  font-weight: bold;
	}
	.business-name.spec{
		color:red;
	}
	.business-name.spec .t1{
		background-color: red;
		color:#fff;
		padding:0 15rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
		font-size:24rpx;
	}
	
	.business-distance {
	  font-size: 28rpx;
	  color: #999;
	}
	
	.business-contact {
	  font-size: 26rpx;
	  color: #666;
	  margin-top: 4rpx;
	}
	
	.business-location {
	  display: flex;
	  align-items: center;
	  margin-top: 8rpx;
	}
	
	.location-text {
	  font-size: 28rpx;
	  color: #999;
	  margin-left: 4rpx;
	}
	
	.business-description {
	  font-size: 28rpx;
	  line-height: 34rpx;
	  color: #666;
	  margin-top: 16rpx;
	  margin-bottom: 16rpx;
	}
	
	.business-categories {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10rpx;
	  margin-top: 16rpx;
	}
	
	.category-badge {
	  font-size: 24rpx;
	  color: #666;
	  background-color: #f0f0f0;
	  padding: 4rpx 12rpx;
	  border-radius: 20rpx;
	}
	
	.business-certificates {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10rpx;
	  margin-top: 16rpx;
	}
	
	.certificate-badge {
	  display: flex;
	  align-items: center;
	  font-size: 26rpx;
	  background: #fff7ed;
		border: 2rpx solid #fed7aa;
	border-radius: 32rpx;
	padding: 8rpx 16rpx;
	color: #ea580c;
	}
	
	.business-images {
	  display: flex;
	  gap: 10rpx;
	  margin-top: 16rpx;
	}
	
	.business-image {
	  width: 220rpx;
	  height: 160rpx;
	  border-radius: 8rpx;
	}
	
	.business-footer {
	  display: flex;
	  align-items: center;
	  margin-top: 10rpx;
	  padding-top: 10rpx;
	  border-top: 1rpx solid #eee;
	}
	
	.business-phone {
	  display: flex;
	  align-items: center;
	}
	.phone-number {
	  font-size: 32rpx;
	  font-weight: bold;
	  margin-left: 8rpx;
	}
	.view-info-btn {
	  font-size: 24rpx;
	  color: #ffffff;
	  background-color: #007aff;
	  padding:0rpx 25rpx;
	  border-radius:30rpx;
	  margin-left: auto;
	  margin-right:0;
	  height:50rpx;
	  line-height: 50rpx;
	}
</style>